<template>
  <div class="pt-1 px-2 relative overflow-auto bg-white">
    <el-card shadow="never" header="订单信息">
      <el-table v-loading="loading" :data="PayOrderList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30" align="center" />
        <el-table-column v-if="!isClient" v-hasPermi="['pay:payOrder:trader']" label="所属商户" align="center">
          <template #default="{ row }">
            <div class="flex flex-col items-center leading-[0.8] justify-center">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" v-if="isAdmin" @click="copyText(row.agentName, '代理名称')">{{
                row.agentName
              }}</el-link>
              <el-icon v-if="row.agentName && isAdmin"><ArrowDown /></el-icon>
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.clientName, '商户名称')">{{
                row.clientName
              }}</el-link>
              <el-icon v-if="row.clientName"><ArrowDown /></el-icon>
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.appId, '应用ID')">{{
                row.appId
              }}</el-link>
            </div>
          </template>
        </el-table-column>

        <el-table-column v-else label="APP ID" align="center">
          <template #default="{ row }">
            <div class="flex flex-col items-center leading-[0.8] justify-center">
              <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.appId, '应用ID')">{{
                row.appId
              }}</el-link>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="订单号" width="240">
          <template #default="{ row }">
            <div class="flex flex-col items-start overflow-hidden w-[100%] leading-[1.2] text-[12px]">
              <el-tooltip class="box-item" effect="dark" :content="'A端订单号:' + row.orderAid" placement="right">
                <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderAid, 'A端订单号')">{{
                  row.orderAid
                }}</el-link>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" :content="'B端订单号:' + row.orderNo" placement="right">
                <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderNo, 'B端订单号')">{{
                  row.orderNo
                }}</el-link>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" :content="'C端订单号:' + row.orderId" placement="right">
                <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderId, 'C端订单号')">{{
                  row.orderId
                }}</el-link>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" :content="'平台订单号:' + row.orderCid" placement="right">
                <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.orderCid, '平台订单号')">{{
                  row.orderCid
                }}</el-link>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" width="120">
          <template #default="{ row }">
            <div class="flex flex-col items-start">
              <el-tooltip class="box-item" effect="dark" :content="'A端金额: ' + row.orderMoney" placement="right">
                <div>
                  <span>{{ row.currency }} </span> <span>{{ row.orderMoney }}</span>
                </div>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" :content="'美元: ' + row.usdMoney" placement="right">
                <div>
                  <span>USD </span> <span>{{ row.usdMoney }}</span>
                </div>
              </el-tooltip>
              <el-tooltip v-if="row.forceMoney" class="box-item" effect="dark" :content="'强转金额: ' + row.forceMoney" placement="right">
                <div>
                  <span>{{ row.forceCurrency }} </span> <span>{{ row.forceMoney }}</span>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template #default="{ row }">
            <div class="flex flex-col gap-1 items-center">
              <dict-tag :options="order_status" :value="row.status" />
              <dict-tag :options="refund_status" :value="row.refundStatus" />

              <el-tooltip v-if="row.disputeRemark" class="box-item" effect="dark" :content="row.disputeRemark" placement="right">
                <div class="w-fit relative flex items-center">
                  <dict-tag :options="disputes_status" :value="row.disputeStatus" />
                  <svg
                    t="1729674430243"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="14765"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="22"
                    height="22"
                    style="position: absolute; right: 0; top: 0; transform: translateX(50%) translateY(-50%)"
                    fill="#777"
                  >
                    <path
                      d="M113.777778 170.666667h796.444444a56.888889 56.888889 0 0 1 56.888889 56.888889v533.361777a56.888889 56.888889 0 0 1-56.888889 56.888889H427.861333l-185.969777 118.129778a28.444444 28.444444 0 0 1-43.690667-24.007111V817.777778H113.777778a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889z m163.555555 284.444444c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z m227.555556 0c-14.222222 0.512-26.083556 5.489778-35.555556 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555556 14.108445s26.083556-4.693333 35.555555-14.108445c9.472-9.386667 14.222222-21.162667 14.222223-35.271111s-4.750222-25.884444-14.222223-35.271111c-9.472-9.415111-21.333333-14.392889-35.555555-14.904889z m227.555555 0c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z"
                      fill="#666"
                      p-id="77068"
                    ></path>
                  </svg>
                </div>
              </el-tooltip>
              <dict-tag v-else :options="disputes_status" :value="row.disputeStatus" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收款信息" width="120">
          <template #default="{ row }">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="'收款平台:' + payList.filter((item) => item.typeId == row.payTypeId)[0]?.name || row.payTypeId"
              placement="top"
            >
              <div class="truncate overflow-hidden max-w-[100%] w-fit">
                {{ payList.filter((item) => item.typeId == row.payTypeId)[0]?.name || row.payTypeId }}
              </div>
            </el-tooltip>
            <div v-hasPermi="['pay:payOrder:accountName']">
              <el-tooltip class="box-item" effect="dark" :content="'收款账号:' + row.accountName" placement="top">
                <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.accountName, '收款账号')">{{
                  row.accountName
                }}</el-link>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="来源域名/客户信息" width="180">
          <template #default="{ row }">
            <el-popover placement="left" trigger="hover" :width="260">
              <template #reference>
                <div class="flex flex-col">
                  <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.fromDomain, 'B端订来源域名单号')">{{
                    row.fromDomain
                  }}</el-link>
                  <el-link
                    v-if="row.shipping.first_name"
                    class="truncate overflow-hidden max-w-[100%]"
                    :underline="false"
                    @click="copyText(row.shipping.first_name + ' ' + row.shipping.last_name, '姓名')"
                    >{{ row.shipping.first_name + ' ' + row.shipping.last_name }}</el-link
                  >
                  <el-link class="truncate overflow-hidden max-w-[100%]" :underline="false" @click="copyText(row.shipping.email, '邮箱')">{{
                    row.shipping.email
                  }}</el-link>
                </div>
              </template>
              <div class="kh_info flex flex-col w-[100%] gap-1">
                <span class="text-[#666] text-[14px] font-bold" v-if="Object.keys(row.shipping).length > 0">送货地址信息</span>
                <div
                  v-if="row.shipping.first_name"
                  class="text-nowrap truncate break-words"
                  @click="copyText(row.shipping.first_name + ' ' + row.shipping.last_name, '姓名')"
                >
                  <span>姓名：</span>
                  <span>{{ row.shipping.first_name + ' ' + row.shipping.last_name }}</span>
                </div>
                <div v-if="row.shipping.phone" class="text-nowrap truncate break-words" @click="copyText(row.shipping.phone, '电话')">
                  <span>电话：</span>
                  <span>{{ row.shipping.phone }}</span>
                </div>
                <div v-if="row.shipping.email" class="text-nowrap truncate break-words" @click="copyText(row.shipping.email, '邮箱')">
                  <span>邮箱：</span>
                  <span>{{ row.shipping.email }}</span>
                </div>
                <div v-if="row.shipping.country" class="text-nowrap truncate break-words" @click="copyText(row.shipping.country, '国家')">
                  <span>国家：</span>
                  <span>{{ row.shipping.country }}</span>
                </div>
                <div v-if="row.shipping.city" class="text-nowrap truncate break-words" @click="copyText(row.shipping.city, '城市')">
                  <span>城市：</span>
                  <span>{{ row.shipping.city }}</span>
                </div>
                <div v-if="row.shipping.state" class="text-nowrap truncate break-words" @click="copyText(row.shipping.city, '城市')">
                  <span>州：</span>
                  <span>{{ row.shipping.state }}</span>
                </div>
                <div v-if="row.shipping.address_1" class="text-nowrap truncate break-words" @click="copyText(row.shipping.address_1, '街道')">
                  <span>地址1：</span>
                  <span>{{ row.shipping.address_1 }}</span>
                </div>
                <div v-if="row.shipping.postcode" class="text-nowrap truncate break-words" @click="copyText(row.shipping.postcode, '邮编')">
                  <span>邮编：</span>
                  <span>{{ row.shipping.postcode }}</span>
                </div>

                <div v-if="row.fromDomain" class="text-nowrap truncate break-words" @click="copyText(row.fromDomain, '来源域名')">
                  <span>来源域名：</span>
                  <span>{{ row.fromDomain }}</span>
                </div>

                <div v-if="row.orderSn" class="text-nowrap truncate break-words" @click="copyText(row.orderSn, '自定义单号')">
                  <span>自定义单号：</span>
                  <span>{{ row.orderSn }}</span>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="付款信息" width="140" align="center">
          <template #default="{ row }">
            <div class="w-[100%] text-nowrap flex flex-col gap-1">
              <el-tooltip class="box-item" effect="dark" v-if="row.payMethodType" :content="'付款方式：' + row.payMethodType" placement="top">
                <el-tag class="truncate max-w-[100%]" type="primary">{{ row.payMethodType }}</el-tag>
              </el-tooltip>

              <el-tooltip v-for="item in row.buyerData" class="box-item" effect="dark" :content="item.label + '：' + item.value" placement="top">
                <el-tag class="truncate max-w-[100%]" type="info" v-if="item.value">{{ item.value }}</el-tag>
              </el-tooltip>

              <el-tooltip class="box-item" v-if="row.failMsg" effect="dark" :content="'失败原因：' + row.failMsg" placement="top">
                <el-tag class="truncate max-w-[100%]" type="danger">{{ row.failMsg }}</el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="风险信息" width="140" align="center">
          <template #default="{ row }">
            <div class="flex flex-col gap-1">
              <el-tag type="info" class="cursor-pointer" @click="copyText(row.formIp, '来源IP')">{{ row.formIp }}</el-tag>

              <el-tooltip class="box-item" effect="dark" v-if="row.risk" :content="'风险值：' + row.risk" placement="top">
                <el-tag type="warning" class="truncate max-w-[100%]">风险值：{{ row.risk }}</el-tag>
              </el-tooltip>

              <el-tooltip class="box-item" effect="dark" v-if="row.riskDetail" :content="row.riskDetail" placement="top">
                <el-tag type="danger" class="truncate max-w-[100%] cursor-pointer items-center" style="" @click="copyText(row.riskDetail, '风险信息')"
                  >风险信息：{{ row.riskDetail }}</el-tag
                >
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column v-hasPermi="['admin:order:take']" label="吃单" v-if="shwoEat" prop="" align="center" width="70">
          <template #default="{ row }">
            <div>{{ row.isFeign == 1 ? '是' : '否' }}</div>
          </template>
        </el-table-column>

        <el-table-column label="物流状态" align="center" width="140">
          <template #default="{ row }">
            <div class="relative flex items-center justify-center flex-col gap-1 min-h-[50px]" :class="row.trackRemark ? 'pt-[10px]' : ''">
              <el-tooltip v-if="row.trackRemark" class="box-item" effect="dark" :content="row.trackRemark" placement="right">
                <div class="relative">
                  <dict-tag :options="logistics_status" :value="row.trackStatus" />
                  <svg
                    t="1729674430243"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="14765"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="22"
                    height="22"
                    style="position: absolute; right: 0; top: 0; transform: translateX(50%) translateY(-50%)"
                    fill="#777"
                  >
                    <path
                      d="M113.777778 170.666667h796.444444a56.888889 56.888889 0 0 1 56.888889 56.888889v533.361777a56.888889 56.888889 0 0 1-56.888889 56.888889H427.861333l-185.969777 118.129778a28.444444 28.444444 0 0 1-43.690667-24.007111V817.777778H113.777778a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889z m163.555555 284.444444c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z m227.555556 0c-14.222222 0.512-26.083556 5.489778-35.555556 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555556 14.108445s26.083556-4.693333 35.555555-14.108445c9.472-9.386667 14.222222-21.162667 14.222223-35.271111s-4.750222-25.884444-14.222223-35.271111c-9.472-9.415111-21.333333-14.392889-35.555555-14.904889z m227.555555 0c-14.222222 0.512-26.083556 5.489778-35.555555 14.904889-9.472 9.386667-14.222222 21.162667-14.222222 35.271111s4.750222 25.884444 14.222222 35.271111c9.472 9.386667 21.333333 14.108444 35.555555 14.108445s26.083556-4.693333 35.555556-14.108445c9.472-9.386667 14.222222-21.162667 14.222222-35.271111s-4.750222-25.884444-14.222222-35.271111c-9.472-9.415111-21.333333-14.392889-35.555556-14.904889z"
                      fill="#666"
                      p-id="77068"
                    ></path>
                  </svg>
                </div>
              </el-tooltip>
              <dict-tag v-else :options="logistics_status" :value="row.trackStatus" />
              <el-tooltip v-if="row.trackNo" class="box-item" effect="dark" :content="'物流单号:' + row.trackNo" placement="right">
                <el-tag class="truncate w-[100%]" style="display: block; line-height: 24px">{{ row.trackNo }}</el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="订单/商品类型" width="150">
          <template #default="{ row }">
            <dict-tag v-if="row.orderType" :options="order_type" :value="row.orderType" />
            <dict-tag v-if="row.goodsType" :options="product_type" :value="row.goodsType" />
          </template>
        </el-table-column>

        <el-table-column label="创建时间/更新时间" width="160">
          <template #default="{ row }">
            <el-tooltip class="box-item" effect="dark" :content="'创建时间:' + row.createTime" placement="top">
              <div class="truncate">{{ row.createTime }}</div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" :content="'更新时间:' + row.updateTime" placement="top">
              <div class="truncate">{{ row.updateTime }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="mt-[20px]" shadow="never" header="订单日志">
      <div class="flex justify-end mb-[20px]">
        <div class="flex items-center w-fit gap-5">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            background
            :total="total"
            @change="getList"
          />
          <right-toolbar v-model:showSearch="showSearch" :show-search-btn="false" @query-table="getList"></right-toolbar>
        </div>
      </div>
      <el-timeline v-loading="loading" center>
        <div v-if="orderLogList.length">
          <el-timeline-item v-for="(activity, index) in orderLogList" :key="index">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item :name="index">
                <template #title>
                  <div class="flex justify-between items-center w-[100%] leading-[1] pr-3">
                    <div>
                      {{ activity.operate }}
                      <span class="text-[#666] ml-5">{{ activity.updateTime }}</span>
                    </div>

                    <el-link
                      :underline="false"
                      class="leading-[1] mb-0"
                      style="margin-bottom: 0"
                      size="small"
                      icon="View"
                      @click.stop="getChildList(activity.logId)"
                      >处理日志</el-link
                    >
                  </div>
                </template>
                <div class="p-2 flex flex-col">
                  <div class="grid grid-cols-2 gap-3">
                    <div>
                      <div>请求参数</div>
                      <JsonViewer :value="activity.paramsLog" :expand-depth="1" copyable sort theme="dark" />
                    </div>
                    <div>
                      <div>返回数据</div>
                      <JsonViewer :value="activity.returnLog" :expand-depth="1" copyable sort theme="dark" />
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
            <div class="flex items-center mt-4 gap-10 text-[#666] justify-end">
              <span>耗时：{{ activity.time }}ms</span>
            </div>
          </el-timeline-item>
        </div>
      </el-timeline>
      <div class="flex justify-end mt-[20px]">
        <div class="flex items-center w-fit gap-5">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            background
            :total="total"
            @change="getList"
          />
          <right-toolbar v-model:showSearch="showSearch" :show-search-btn="false" @query-table="getList"></right-toolbar>
        </div>
      </div>
    </el-card>

    <el-dialog v-model="showDialog" width="80vw" title="日志详情" class="min-h-[90vh] overflow-auto">
      <el-timeline v-if="orderChildLogList.length || childLoading" v-loading="childLoading">
        <el-timeline-item v-for="(activity, index) in orderChildLogList" :key="index">
          <el-collapse v-model="activeNameChild" accordion>
            <el-collapse-item :title="activity.operate" :name="index">
              <template #title>
                {{ activity.operate }}
                <span class="text-[#666] ml-5">{{ activity.updateTime }}</span>
              </template>
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <div>请求参数</div>
                  <JsonViewer :value="activity.paramsLog" :expand-depth="1" copyable sort theme="dark" />
                </div>
                <div>
                  <div>返回数据</div>
                  <JsonViewer :value="activity.returnLog" :expand-depth="1" copyable sort theme="dark" />
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div class="flex items-center mt-4 gap-10 text-[#666] justify-end">
            <span>耗时：{{ activity.time }}ms</span>
          </div>
        </el-timeline-item>
      </el-timeline>

      <el-empty v-else description="暂无日志详情"> </el-empty>
    </el-dialog>
  </div>
</template>

<script setup>
import { JsonViewer } from 'vue3-json-viewer';
import 'vue3-json-viewer/dist/index.css';
import { listOrderLog } from '@/api/system/orderLog';
import { getPayOrder } from '@/api/pay/PayOrder';
import { copyTextToClipboard } from '@/directive/common/copyText';
import { selecTypetList } from '@/api/pay/PayType/index';
import useUserStore from '@/store/modules/user';
const { proxy } = getCurrentInstance();
const { refund_status, order_status, order_type, product_type, disputes_status, logistics_status, sys_country } = toRefs(
  proxy?.useDict('refund_status', 'order_status', 'order_type', 'product_type', 'disputes_status', 'logistics_status', 'sys_country')
);
const PayOrderList = ref([]);

const props = defineProps({
  orderId: {
    type: String,
    default: ''
  }
});

const cmOptions = reactive({
  mode: 'javascript',
  lineNumbers: false,
  lineWiseCopyCut: false,
  lint: false
});
const activeName = ref('');
const activeNameChild = ref('');
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  orderId: 0,
  queryParent: true,
  sortType: 1
});

const ChildQueryParams = reactive({
  pageSize: 999,
  pageNum: 1,
  orderId: 0,
  parentId: 0,
  sortType: 1
});

/** 查询订单日志列表 */
const loading = ref(false);
const total = ref(0);
const orderLogList = ref([]);
const route = useRoute();
const getList = async () => {
  loading.value = true;
  if (props.orderId) {
    queryParams.orderId = props.orderId;
  } else {
    queryParams.orderId = route.query.orderId;
  }
  const res = await listOrderLog(queryParams);
  if (res) {
    orderLogList.value = res.rows.map((item) => {
      if (isJSON(item.returnLog)) {
        item.returnLog = JSON.parse(item.returnLog);
      }
      if (isJSON(item.paramsLog)) {
        item.paramsLog = JSON.parse(item.paramsLog);
      }
      return item;
    });
    loading.value = false;
    total.value = res.total;
    getPayOrderList();
  }
};
const shwoEat = computed(() => {
  return !useUserStore().isClient && useUserStore().isFeign;
});
const showDialog = ref(false);
const showClass = ref(true);
const childTotal = ref(0);
const orderChildLogList = ref([]);
const childLoading = ref(false);
const getChildList = async (id) => {
  if (id) {
    ChildQueryParams.parentId = id;
  }
  showClass.value = false;
  showDialog.value = true;
  childLoading.value = true;
  setTimeout(() => {
    showClass.value = true;
  }, 50);
  ChildQueryParams.orderId = props.orderId;
  const res = await listOrderLog(ChildQueryParams);
  if (res) {
    orderChildLogList.value = res.rows.map((item) => {
      if (isJSON(item.returnLog)) {
        item.returnLog = JSON.parse(item.returnLog);
      }
      if (isJSON(item.paramsLog)) {
        item.paramsLog = JSON.parse(item.paramsLog);
      }
      return item;
    });
    childLoading.value = false;
    childTotal.value = orderLogList.value.length;
  }
};
const backParent = () => {
  showClass.value = false;
  type.value = 'parent';
  setTimeout(() => {
    showClass.value = true;
  }, 50);
};

function isJSON(str) {
  if (typeof str == 'string') {
    try {
      var obj = JSON.parse(str);
      if (typeof obj == 'object' && obj) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      return false;
    }
  }
}
/**获取支付平台 */
const payList = ref([]);
const payConfig = ref([]);
const getPayList = async () => {
  let res = await selecTypetList();
  payList.value = res.data;
};
const getPayOrderList = async () => {
  let res = await getPayOrder(route.query.orderId);
  if (res.data) {
    res.data.customer = res.data.customer ? JSON.parse(res.data.customer) : {};
    PayOrderList.value[0] = res.data;
    PayOrderList.value = PayOrderList.value.map((item) => {
      if (isJSON(item.customer)) {
        item.customer = JSON.parse(item.customer);
      } else {
        item.customer = {};
      }
      if (isJSON(item.shipping)) {
        item.shipping = JSON.parse(item.shipping);
      } else {
        item.shipping = {};
      }

      if (isJSON(item.buyer)) {
        item.buyer = JSON.parse(item.buyer);
        item.buyerData = [];
        for (const key in item.buyer) {
          if (key != 'buyer_id') {
            item.buyerData.push({ label: key, value: item.buyer[key] });
          }
        }
      } else {
        item.buyer = {};
      }
      return item;
    });
  }
};

// 复制成功
const copyText = (str, msg) => {
  if (!str) return;
  let newStr = str + '';
  let res = copyTextToClipboard(newStr);
  if (res) {
    ElMessage.success(msg + '复制成功');
  }
};

onMounted(() => {
  getList();

  getPayList();
});
</script>

<style scoped>
:deep(.el-link) {
  display: flex !important;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 10px;
  width: fit-content;
}
.parent {
  transform: translateX(-100%);
  width: 100%;
  transition: 0.5s;
  &.show {
    transform: translateX(0);
    transition: 0.5s;
  }
}
:deep(.el-collapse-item__header) {
  border-bottom: none;
  border-top: none;
}
:deep(.el-collapse) {
  border-bottom: none;
  border-top: none;
}
:deep(.el-collapse-item) {
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 6%);
  border-radius: 10px;
  padding-inline: 10px;
  background-color: #fff;
  &.is-active {
    padding-bottom: 20px;
  }
}
:deep(.el-collapse-item__wrap) {
  border-bottom: none;
}
:deep(.el-timeline) {
  padding-left: 0;
}
:deep(.el-table .el-link) {
  display: inline-block !important;
  width: auto;
  gap: 0px;
  margin-bottom: 0px;
}
:deep(.el-table .el-link .el-link__inner) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kh_info {
  > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    cursor: pointer;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    * {
      width: fit-content;
    }
  }
}
:deep(.el-tag__content) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style>
.jv-container.jv-dark {
  height: 100%;
  max-height: 500px;
  overflow: auto;
}
</style>
